<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'机房设备'"></contentTitle>
        <div class="dy-md">
          <div class="dy-md4" v-for="(row,index) in dataList">
            <div class="dy-md4-pic">
              <img :src="row.path" alt="" />
            </div>
            <div class="dy-md4-info">
              <div class="dy-md4-info-wd">{{row.zhi}}</div>
              <div class="dy-md4-info-text">{{row.wz}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

import wd from '../../../assets/img/sale_more/temperature.png'
import sd from '../../../assets/img/sale_more/humidity.png'
import yw from '../../../assets/img/sale_more/smoke.png'
import voc from '../../../assets/img/sale_more/voc.png'
import co2 from '../../../assets/img/sale_more/co2.png'
import co from '../../../assets/img/sale_more/co.png'
import pm from '../../../assets/img/sale_more/pm.png'

const dataList = ref([]);
onMounted(() => {
  getDataList();
})
/**
 * 获取服务区档案信息
 */
async function getDataList() {

  dataList.value = [{
    path: wd,
    zhi: '22℃',
    wz: '温度'
  },{
    path: sd,
    zhi: '31.9%',
    wz: '湿度'
  },{
    path: yw,
    zhi: '82ppm',
    wz: '烟雾'
  },{
    path: voc,
    zhi: '187g/L',
    wz: 'voc'
  },{
    path: co2,
    zhi: '790ppm',
    wz: 'co2'
  },{
    path: co,
    zhi: '8.7ppm',
    wz: 'co'
  },{
    path: pm,
    zhi: '41ug/m³',
    wz: 'pm2.5'
  }]
}

</script>

<style scoped>
  .dy-panel-main{
    padding:2.5vh;
  }
  .dy-md{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .dy-md4{
      width: 30%;
      display: flex;
      border: 1px solid #00EAFF;
      margin: 10px;
      justify-content: space-around;
    }
    .dy-md4-pic{
      display: flex;
      flex-wrap: wrap;
      width: 80px;
      text-align: center;
      justify-content: center;
      padding: 20px 0;

    }
    .dy-md4-info{
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      .dy-md4-info-wd{
        font-size: 14px;
      }
      .dy-md4-info-text{
        font-size: 12px;
        color: #00EAFF;
      }
    }
  }
</style>
